<template>
  <div class="tabbar-item" @click="changeState">
    <div v-if="currentActive" ><slot name="item-icon-active" ></slot></div>
    <div v-else @click="changeState"><slot name="item-icon-inactive" ></slot></div>
    <div :class="{active: currentActive}" :style="activeColor"><slot name="item-text"></slot></div>
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String
    },
    textColor: {
      type: String,
      default: '#ff5777'
    }
  },
  data () {
    return {

    }
  },
  computed: {
    currentActive () {
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeColor () {
      return this.currentActive ? { color: this.textColor } : { color: '#666' }
    }
  },
  created () {},
  mounted () {},
  methods: {
    changeState () {
      this.$router.push(this.path)
    }
  }
}
</script>
<style lang="less" scoped>
/* @import ''; 引入css类 */
.tabbar-item {
  height: 49px;
  text-align: center;
  // line-height: 49px;
  flex: 1;
  padding-bottom: 3px;
  font-size: 14px;
  img {
    padding-top: 3px;
    width: 24px;
    height:24px;
    vertical-align: center;
  }
}

.active {
  color: red;
}

</style>
